@ts-nocheck
<template>
  <Header @logoClicked="handleLogoClick" />
  <Sider ref="sider" />
  <div
    class="main"
    :style="{ left: showSidebar ? sidebarWidth + 'px' : '0px' }"
  >
    <el-scrollbar
      ref="mainScrollbar"
      class="main-scrollbar"
      :height="clientHeight - 84"
    >
      <transition name="el-fade-in">
        <Layout />
      </transition>
    </el-scrollbar>
    <!-- <el-backtop :bottom="100" /> -->
    <el-backtop target=".main-scrollbar > div" :bottom="100" />
  </div>
  <Footer />
  <Timer />
</template>

<script>
import commonStore from "@/store/common";
import { mapWritableState, mapState } from "pinia";
import Layout from "./Layout/index.vue";
import Header from "./Header/index.vue";
import Footer from "./Footer/index.vue";
import Sider from "./Sider/index.vue";
import Timer from "./Timer/index.vue";
export default {
  components: {
    Layout,
    Header,
    Footer,
    Sider,
    Timer,
  },
  data() {
    return {
      scrollbarUpdateTimer: null,
    };
  },
  computed: {
    ...mapWritableState(commonStore, [
      "darkMode",
      "showSidebar",
      "sidebarWidth",
      "clientHeight",
    ]),
    ...mapState(commonStore, ["isWideEnough"]),
  },
  methods: {
    handleLogoClick() {
      this.showSidebar = !this.showSidebar;
    },
  },
  mounted() {
    // console.log(this.$refs);
    // this.$refs.mainScrollbar.update();
    this.scrollbarUpdateTimer = setInterval(() => {
      this.$refs.mainScrollbar.update();
    }, 1000);
    if (!this.isWideEnough) {
      this.showSidebar = false;
    }
  },
  beforeDestroy() {
    clearInterval(this.scrollbarUpdateTimer);
  },
};
</script>

<style scoped>
.main {
  /* margin: 60px 0px 16px 200px; */
  position: fixed;
  top: 60px;
  left: 200px;
  right: 0px;
  bottom: 24px;
  padding: 0;
  margin: 0;
  /* overflow: none; */
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

.main-scrollbar {
  width: 100%;
  height: 100%;
}
</style>
